<template>
  <!-- 头部整体盒子 -->
  <div class="fatherDiv">
    <div class="header">
      <!-- 电脑导航 -->
      <!-- hidden-xs 1240 -->
      <div class="header-nav container hidden-xs">
        <!-- 导航logo -->
        <div class="header-nav-logo">
          <img class="img" v-lazy="require('@/assets/img/common/logo@2x.png')" alt="" />
        </div>
        <!-- 导航内容 -->
        <ul class="header-nav-wrapper">
          <li
            v-for="(item,index) in navList.slice(0,2)"
            :key="index"
            :class="index==navIndex?'active':''"
            @click="navClick(index,item.name)"
          >
            <router-link :to="item.path">
              {{item.name}}
              <i class="underline"></i>
            </router-link>
          </li>
          <div class="header-nav-wrapper-button">
            <div class="orange" @click="OpenLogin()">注册</div>
            <div @click="OpenLogin()">登录</div>
          </div>
        </ul>
      </div>
      <!-- 手机导航 -->
      <div class="header-nav-m container-fuild visible-xs">
        <div class="header-nav-m-logo">
          <img class="center-block" v-lazy="require('@/assets/img/common/logo.png')" alt="" />
        </div>
        <!-- 导航栏 -->
        <div class="header-nav-m-menu text-center">
          {{menuName}}
          <div
            class="header-nav-m-menu-wrapper"
            data-toggle="collapse"
            data-target="#menu"
            @click="menuClick"
          >
            <span :class="menuClass"></span>
          </div>
          <!-- 导航内容 -->
          <ul id="menu" class="header-nav-m-wrapper collapse">
            <li
              v-for="(item,index) in navList"
              :key="index"
              :class="index==navIndex?'active':''"
              @click="OpenLogin(index,item.name)"
              data-toggle="collapse"
              data-target="#menu"
            >
              <router-link :to="item.path">
                {{item.name}}
                <i class="underline"></i>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- LoginDialog -->
    <LoginDialog ref="refLoginDialog" :dialogVisible.sync="loginShow" @closeSpecial="handleClose" />

    <Menu />
  </div>
</template>
<script>
import { WOW } from 'wowjs';
import LoginDialog from '@/components/LoginDialog'
import Menu from '@/components/Menu'
export default {
  name: "Header",
  components: { LoginDialog, Menu },
  data() {
    return {
      navIndex: sessionStorage.getItem('navIndex') ? sessionStorage.getItem('navIndex') : 0,
      menuName: "首页",
      menuClass: "glyphicon glyphicon-menu-down",
      loginShow: false,
      navList: [
        {
          name: "首页",
          path: "/home",
        },
        {
          name: "试算",
          path: "/",
        },
        {
          name: "登录&注册",
          path: "/",
        }
      ]
    };
  },
  mounted() {
    /* wowjs动画 */
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    })
    wow.init();
  },
  methods: {
    navClick(index, name) {
      // this.navIndex = index;
      // sessionStorage.setItem('navIndex',index)
      // this.menuName = name;
      if(index === 1) {
        this.OpenLogin()
      }
    },
    menuClick() {
      if (this.menuClass == "glyphicon glyphicon-menu-down") {
        this.menuClass = "glyphicon glyphicon-menu-up"
      } else {
        this.menuClass = "glyphicon glyphicon-menu-down"
      }
    },
    OpenLogin() {
      this.loginShow = true
      this.$refs.refLoginDialog.getWxLogin()
    },
    handleClose() {
      this.loginShow = false
      this.menuClass = "glyphicon glyphicon-menu-down"
    }
  }
};
</script>
<style lang="scss" scoped>
/* 顶部 */
.fatherDiv {
  width: 100%;
  height: 70px;
}
/* 导航栏Header-PC */
.header {
  position: fixed;
  width: 100%;
  background: #FFFFFF;
  transition: all ease 0.6s;
  box-shadow: 0px 2px 30px 0px rgba(15,91,255,0.1);
  z-index: 99;
  /* 导航栏 */
  &-nav {
    height: 70px;
    /* 导航栏logo */
    &-logo {
      width: 150px;
      height: 100%;
      float: left;
      position: relative;
      /* 导航栏logo图片 */
      .img {
        // width: 200px;
        height: 36px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
    /* 导航栏 导航容器 */
    &-wrapper {
      display: flex;
      align-items: center;
      height: 100%;
      float: right;
      margin: 0;
      max-width: 800px;
      /* 按钮 */
      &-button {
        display: flex;
        margin-left: 42px;
        div {
          width: 62px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background: #f4f4f4;
          color: #161C2D;
          font-size: 12px;
          border-radius: 2px;
          margin-right: 4px;
          cursor: pointer;
          &:hover {
            background: rgba(244, 244, 244,0.8);
          }
        }
        div:nth-child(1) {
          margin-right: 12px;
        }
        .orange {
          background: #FF7F43;
          color: #FFFFFF;
          &:hover {
            background: rgba(255, 127, 67,0.8);
          }
        }
      }
    }
  }
}

/* 导航栏 每个导航 */
.header .header-nav .header-nav-wrapper > li {
  float: left;
  margin: 0 20px;
  position: relative;
}
/* 导航栏 每个导航下面的 a 链接 */
.header .header-nav .header-nav-wrapper > li > a {
  color: #161C2D;
  font-size: 12px;
  /* font-weight: bold; */
  padding: 4px 0;
  position: relative;
}
/* 导航栏 每个导航下面的 a 链接的下划线 */
.header .header-nav .header-nav-wrapper > li > a > i {
  display: block;
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  opacity: 0;
  transition: all 0.2s ease;
  background: linear-gradient(90deg, #FBB00E 0%, #F57806 100%);
}
/* 导航栏 每个导航下面的 a 链接的右侧小三角 */
.header .header-nav .header-nav-wrapper > li > a > span {
  font-size: 12px;
  transition: transform ease 0.5s;
}
/* 导航栏 每个导航下面的 a 链接 鼠标滑上去的样式 */
.header .header-nav .header-nav-wrapper > li > a:hover {
  color: #FF7F43;
  text-decoration: none;
}
/* 导航栏 每个导航下面的 a 链接 鼠标滑上去下划线的样式 */
.header .header-nav .header-nav-wrapper > li > a:hover .underline {
  opacity: 1;
  width: 100%;
  left: 0;
}
/* 导航栏 每个导航下面的 a 链接 鼠标滑上去三角标的样式 */
.header .header-nav .header-nav-wrapper > li > a:hover span {
  transform: rotate(180deg);
}
/* 导航栏 每个导航下面的 a 链接 鼠标点击后的样式 */
.header .header-nav .header-nav-wrapper > li.active > a {
  color: #FF7F43;
  text-decoration: none;
  border-bottom: 2px solid #FF7F43;
}
/* 导航栏 每个导航下面的二级导航容器 */
.header .header-nav .header-nav-wrapper > li > dl {
  display: none;
  position: absolute;
  width: 168px;
  top: 80%;
  left: 0;
  z-index: 999999;
  box-shadow: 0 0 3px 1px #ccc;
  background: #fff;
}
/* 导航栏 每个导航下面的二级导航容器的每个导航 */
.header .header-nav .header-nav-wrapper > li > dl > dt {
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
/* 导航栏 每个导航下面的二级导航容器的每个导航 当鼠标滑上时的样式*/
.header .header-nav .header-nav-wrapper > li > dl > dt > a:hover {
  text-decoration: none;
}
/* 导航栏 滑上一级导航显示二级导航 */
.header .header-nav .header-nav-wrapper > li:hover dl {
  display: block;
}
.header .header-nav .header-nav-wrapper > li > dl > dt:hover {
  cursor: pointer;
  background: #ccc;
}
@media screen and (max-width: 997px) {
  .header .header-nav-m {
    position: relative;
  }
  /* 导航栏logo容器 */
  .header .header-nav-m .header-nav-m-logo {
    height: 70px;
    position: relative;
  }
  /* 导航栏logo图片 */
  .header .header-nav-m .header-nav-m-logo img {
    // width: 95px;
    height: 42px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  /* 导航栏  菜单容器 */
  .header .header-nav-m .header-nav-m-menu {
    color: #fff;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    background: #474747;
    position: relative;
  }
  /* 导航栏 菜单图标 */
  .header .header-nav-m .header-nav-m-menu-wrapper {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -20px;
    width: 50px;
    height: 40px;
    color: #fff;
    z-index: 999999;
    font-size: 12px;
  }
  /* 导航栏 */
  .header .header-nav-m .header-nav-m-wrapper {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: #474747;
    z-index: 9999999;
  }
  /* 导航栏 每个导航 */
  .header .header-nav-m .header-nav-m-wrapper > li {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }
  /* 导航栏 每个导航下面的 a 链接 */
  .header .header-nav-m .header-nav-m-wrapper > li > a {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 15px 0;
    position: relative;
  }
  /* 导航栏 每个导航下面的 a 链接的右侧小三角 */
  .header .header-nav .header-nav-wrapper > li > a > span {
    font-size: 10px;
  }
}
</style>
